<template>
<div class="article_all">
  <div class="top">
    <div class="top_top">
      <router-link to="/article">
        <Icon type="chevron-left"></Icon>
      </router-link>
    </div>
    <div class="top_center">
      <p>欢迎点评和观看</p>
    </div>
    <div class="top_right">
      <Button type="primary" @click="modal1 = true">笔记本</Button>
      <Modal style="text-align: center"
             v-model="modal1"
             title="这是一个记录框，在这你可以记录你想记录的问题"
             @on-ok="ok"
             @on-cancel="cancel">
        <p>你的问题：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
        <p>你的思路：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
        <p>解决方法：<Input v-model="value4" icon="android-create"  placeholder="请输入..."   style="width: 200px"></Input></p>
      </Modal>
    </div>
  </div>
   <div class="main">
     <div class="main_top">
       <p class="main_top_left">{{gettitle[0].title}}</p>
       <p class="main_top_right"><span>{{gettitle[0].autho}}</span></p>
     </div>
     <div class="main_center">
       <p>{{gettitle[0].main}}</p>
     </div>
     <div class="main_bottom">
       <p class="left">{{gettitle[0].keyword}}</p>
       <p class="right">{{gettitle[0].more}}</p>
       <p class="color">{{gettitle[0].place}}</p>
     </div>
     <div class="main_bottom_bottom">

     </div>
   </div>
</div>

</template>


<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        value4:'',
        modal1: false
      }
    },
    computed: {
      ...mapState(['articles']),
      gettitle: function () {
        var id = this.id
        return this.articles.filter(function (number) {//筛选
          return number.id == id
        })
      },
      id(){
        return this.$route.params.id
      }
    },
    created(){
       console.log(this.$route.path.split('/'))
    },
    methods: {
      ok () {
        this.$Message.info('点击了确定');
      },
      cancel () {
        this.$Message.info('点击了取消');
      }
    }
  }
</script>


<style scoped>
  .top{background: #464c5b;color: #ffffff;overflow: hidden;height:40px;}
  .top .ivu-icon {font-size: 25px;line-height: 40px;}
  .top_top{width:20%;float: left; text-align: left;}
  .top_center{width:60%;float: left;text-align: center;line-height: 40px;font-size: 20px}
  .top_right{width:20%;float: left;text-align: right;line-height: 40px}
  .main_top{background: #aaebff;overflow: hidden;}
  .main_top_left{font-size: 21px;font-family:  "楷体";font-weight: bolder;float: left;width: 100%;}
  .main_top_right{float: right;border: 1px solid gainsboro;border-radius:10px;margin-top: 40px;margin-right: 10px; width: 60px;text-align: center;background: #ff0d39;color: white;font-family:  "楷体";margin-bottom: 10px;}
  .main_center{margin-top: 5px;}
  .main_center p{font-size: 20px;text-align: left;font-weight: bolder;margin-top: 5px;font-family:"楷体";margin-left: 5px;  }
  .main_bottom{color: #8e8d8d;margin-top: 10px;}
  .main_bottom .left{float: left;width: 50%;}
  .main_bottom .right{float: right;width: 50%;}
  .main_bottom .color{color: blue;}
  .main_bottom_bottom{padding-top: 60px;border-top: 1px black dashed;}
</style>
